<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .banner {
            width: 400px;
            height: 300px;
            margin: 50px auto;
            position: relative;
            background-color: #f00;
            overflow: hidden;
        }

        .banner ul {
            width: 2000px;
            height: 300px;
            position: absolute;
            display: flex;
        }

        .banner ul li {
            width: 400px;
            height: 300px;
            text-align: center;
            font-size: 60px;
            line-height: 300px;
            pointer-events: none;
        }

        .banner ol {
            width: 100%;
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: center;
        }

        .banner ol li {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #000;
            margin: 10px;
        }

        .banner .active {
            background-color: #fff;
        }

        .banner span {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.5);
            line-height: 30px;
        }

        .banner .next {
            right: 0;
        }
    </style>
</head>

<body>

    <div class="banner">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>1</li>
        </ul>
        <ol>
            <li num="0" class="active"></li>
            <li num="1"></li>
            <li num="2"></li>
            <li num="3"></li>
        </ol>
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
    </div>


    <script src="../js/move.js"></script>
    <script>

        // 无缝轮播的样式
        //   外面一个小盒子   overflow:hidden
        //   里面一个大盒子
        //   大盒子向右移动


        // 无缝滚动的核心
        //    把第一张图接到最后面去 --- 作为过渡
        //    在最后一张图片(也就是第一张图片)播放完的一瞬间直接切换到真正的第一张

        // 页面失去焦点和获取焦点的使用的资源分配问题
        //     获取焦点的时候   资源都跟得上
        //     失去焦点的时候   资源都给了焦点应用


        // 轮播的实现
        //   自动播放
        //       第二张  -400
        //       第三张  -800
        //       第四张  -1200    - (index - 1) * 图片的宽度

        //   点击切换


        var index = 0;
        var t = null;
        var oUl = document.querySelector('ul');
        var oDots = document.querySelectorAll('ol li');
        var oImgs = document.querySelectorAll('ul li');
        var oBanner = document.querySelector('.banner');


        // 防止连点  bug    一张图片move到指定的位置之前都不能再次点击  --- 只有move结束了才可以再次点击
        var flag = true;


        // 页面一打开就要自动播放
        autoPlay();


        // 页面失去焦点之后   轮播炸了

        window.onblur = function () {
            clearInterval(t);
        }

        window.onfocus = function () {
            autoPlay()
        }


        // 事件
        oBanner.onclick = function (e) {
            var e = e || event;   // 解决兼容的

            // 下翻页
            if (e.target.className === 'next') {
                if (flag) {
                    flag = false;
                    clearInterval(t);
                    index++;
                    // 图移动
                    move(oUl, 20, - index * 400, 'left', function () {
                        flag = true;
                        if (index === 4) {
                            index = 0;
                            oUl.style.left = 0;
                        }
                    });
                    // 小圆点也要移动
                    showDot()
                }

            }

            // 上翻页
            if (e.target.className === 'prev') {
                if (flag) {
                    flag = false;
                    clearInterval(t);
                    index--;
                    // 图移动
                    move(oUl, 20, - index * 400, 'left', function () {
                        flag = true;
                        // 如果是第一张就切到最后一张
                        if (index === 0) {
                            index = oImgs.length - 1;
                            oUl.style.left = -index * 400 + 'px';
                        }
                    });
                    // 小圆点也要移动
                    showDot()
                }

            }

            // 小点切换
            if (e.target.tagName === 'LI') {    // 因为页面有很多li  所以把ul中的li的鼠标事件禁用掉  pointer-events:none
                // console.log(111);
                if (flag) {
                    flag = false;
                    clearInterval(t);
                    index = e.target.getAttribute('num');
                    // 图移动
                    move(oUl, 20, - index * 400, 'left', function () {
                        flag = true;
                    });
                    // 小圆点也要移动
                    showDot()
                }


            }
        }


        oBanner.onmouseover = function () {
            clearInterval(t);
        }

        oBanner.onmouseout = function () {
            autoPlay()
        }






        // 自动播放
        function autoPlay() {
            t = setInterval(function () {
                index++;
                // 图移动
                move(oUl, 20, - index * 400, 'left', function () {
                    if (index === 4) {
                        index = 0;
                        oUl.style.left = 0;
                    }
                });
                // 小圆点也要移动
                showDot()
            }, 2000)
        }




        function showDot() {
            //  给所有的小圆点清除active
            for (var i = 0; i < oDots.length; i++) {
                oDots[i].classList.remove('active');
            }

            // 播放最后一张图的时候(其实是第一张)
            if (index === oImgs.length - 1) {
                oDots[0].classList.add('active');
            }
            else {
                oDots[index].classList.add('active');
            }

        }



    </script>

</body>

</html>